<template>
	<div class="edu-page-warp">
		<condition-card @reset="resetQueryForm" @search="handleFilterSubmit">
			<el-row :gutter="24">
				<el-col :span="8">
					<el-form-item :label="$t('dic.name')" prop="name">
						<el-input v-model="queryForm.name" :placeholder="$t('teachers.plsInputTittle')" />
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item :label="$t('elcRound.isOpen')" prop="type">
						<el-select v-model="queryForm.type" filterable style="width: 100%">
							<el-option :label="$t('message.open')" value="1" />
							<el-option :label="$t('message.close')" value="2" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
		</condition-card>
		<el-card shadow="never">
			<div class="edu-page-title">{{ $t('teacherTitle.teacherTitleList') }}</div>
			<div class="edu-opertion-bar" style="margin-bottom: 16px;">
				<div class="float-right">
					<el-button @click="batchUpdate('open')">{{ $t('message.open') }}</el-button>
					<el-button type="primary" @click="batchUpdate('close')">{{ $t('message.close') }}</el-button>
				</div>
			</div>
			<el-table
				ref="studentTable"
				:data="tableData"
				stripe
				@select="selectRow"
				@selection-change="selectionChange"
				tooltip-effect="light"
			>
				<edu-table-column type="selection" width="55" />
				<edu-table-column :label="$t('message.order')" type="index" index="autoIndex" width="50" />
				<edu-table-column :label="$t('message.name')" prop="name" />
				<edu-table-column :label="$t('teachers.isOpenArproveWorkflow')" prop="type">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.type == 1" type="success">{{ $t('message.open') }}</el-tag>
						<el-tag v-if="scope.row.type == 2" type="info">{{ $t('message.close') }}</el-tag>
					</template>
				</edu-table-column>
				<edu-table-column :label="$t('message.operating')" width="48px">
					<template slot-scope="scope">
						<el-button
							v-if="scope.row.type == 2"
							type="text"
							@click="handleOpen(scope)"
						>{{ $t('message.open') }}</el-button>
						<el-button
							v-if="scope.row.type == 1"
							type="text"
							@click="handleClose(scope)"
						>{{ $t('message.close') }}</el-button>
					</template>
				</edu-table-column>
			</el-table>
			<div class="edu-pagination">
				<div class="float-right">
					<el-pagination
						:current-page="queryForm.pageNum_"
						:page-sizes="[20,50,100,500,1000]"
						:page-size="queryForm.pageSize_"
						:total="queryForm.total"
						layout="total, sizes, prev, pager, next, jumper"
						style="float: right;margin:0;"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
					/>
				</div>
			</div>
		</el-card>
	</div>
</template>

<script>
import * as API from "common/src/api/resource/teachers";

export default {
	name: "abnormalList",
	data() {
		return {
			tableData: [],
			queryForm: {
				name: "",
				type: "",
				pageSize_: 20,
				pageNum_: 1,
				total: 0
			},
			idList: []
		};
	},
	methods: {
		init() {
			API.getTeacherTitleList(this.queryForm).then(res => {
				if (res && res.code == 200) {
					_.forEach(res.data.list, item => {
						// item.type = item.type + '';
					});
					this.queryForm.total = res.data.total;
					this.tableData = res.data.list;
				}
			});
		},
		handleFilterSubmit() {
			this.init();
		},
		handleResetForm(formName) {
			this.$refs[formName].resetFields();
			this.queryForm.pageNum_ = 1;
			this.init();
		},
		resetQueryForm(formName) {
			this.queryForm.name = "";
			this.queryForm.type = "";

			this.queryForm.pageNum_ = 1;
			this.init();
		},
		handleSizeChange(size) {
			this.queryForm.pageSize_ = size;
			this.init();
		},
		handleCurrentChange(page) {
			this.queryForm.pageNum_ = page;
			this.init();
		},
		handleOpen(item) {
			this.handleUpdate(item);
		},
		handleClose(item) {
			this.handleUpdate(item);
		},
		handleUpdate(item) {
			let ids = {
					idList: [item.row.id]
				},
				functionName = "";
			if (item.row.type == 2) {
				functionName = "updateNeedTeacherTitle";
			} else {
				functionName = "updateNoNeedTeacherTitle";
			}
			API[functionName](ids).then(res => {
				if (res && res.code == 200) {
					this.$notify({
						title: this.$t("common.text.success"),
						message: this.$t("message.editSuccess"),
						type: "success"
					});
					// Vue.set(this.tableData, item.$index, item.row)
					this.init();
				} else {
					this.$notify({
						title: this.$t("common.text.warning"),
						message: this.$t("message.eidtFailed"),
						type: "warning"
					});
				}
			});
		},
		selectionChange(selection) {
			let _this = this;
			_this.idList = [];
			if (selection.length !== 0) {
				_.forEach(selection, function(item) {
					_this.idList.push(item.id);
				});
			}
		},
		batchUpdate(str) {
			let functionName = "";
			if (this.idList.length === 0) {
				this.$notify({
					title: this.$t("common.text.warning"),
					message: this.$t("common.tips.noSelect"),
					type: "warning"
				});
				return;
			}
			if (str === "open") {
				functionName = "updateNeedTeacherTitle";
			} else {
				functionName = "updateNoNeedTeacherTitle";
			}
			API[functionName]({
				idList: this.idList
			}).then(res => {
				if (res && res.code == 200) {
					this.$notify({
						title: this.$t("common.text.success"),
						message: this.$t("message.editSuccess"),
						type: "success"
					});
					// Vue.set(this.tableData, item.$index, item.row)
					this.init();
				} else {
					this.$notify({
						title: this.$t("common.text.warning"),
						message: this.$t("message.eidtFailed"),
						type: "warning"
					});
				}
			});
		}
	},
	created() {
		this.init();
	}
};
</script>

<style scoped>
</style>
